<template name="feedback">
  <view class="feedback">
    <view class="navigation">
      <image class="navigationIcon" src="../../static/arrow.png" mode="" @click="navigateBack"></image>
      <text class="navigationText">Message board</text>
    </view>
    <textarea class="input" type="text" v-model="remark" placeholder="Hello, please describe your problem." />
    <view class="submit" @click="onSubmit">SUBMIT</view>
  </view>
</template>

<script>
export default {
  name: 'feedback',
  data() {
    return {
      remark: '',
    };
  },
  methods: {
    // 模拟接口
    requireApi: function (params) {
      console.log('params', params);
      return new Promise((resolve, reject) => {
        resolve({
          code: 200,
          data: '',
          msg: '反馈成功',
        });
      });
    },

    // 点击按钮事件
    onSubmit: async function () {
      if (!this.remark) {
        // uni.showToast('不能为空')
        return uni.showToast({
          title: 'Please enter the feedback content!',
          icon: 'none',
          duration: 2000,
        });
      }
      //   发起反馈
      try {
        const res = await this.requireApi(this.remark);
        if (res.code == 200) {
          uni.showToast({
            title: 'Successful submission',
            duration: 2000,
            icon: 'none',
          })
          setTimeout(() => {
            uni.navigateTo({ url: '/pages/index/index' })
          }, 300)
          return;
        }
        uni.showToast({
          title: res.msg || 'Failed to submit',
          icon: 'none',
          duration: 2000,
        });
      } catch (err) {
        uni.showToast({
          title: 'Failed to submit',
          duration: 2000,
          icon: 'none',
        });
      }
    },
    // 返回
    navigateBack() {
      uni.navigateBack({
        delta: 1
      })
    },
  },
  mounted() { },
};
</script>

<style scoped>
page {
  min-height: 100vh;
  padding-bottom: 24rpx;
}

.feedback {
  min-height: 100vh;
  width: 100%;
  background: rgba(245, 245, 245, 1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;

}

.navigation {
  width: 100%;
  background: #fff;
  z-index: 100;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 80rpx 26rpx;
  position: sticky;
  top: 0;
}

.navigationIcon {
  width: 32rpx;
  height: 38rpx;
}

.navigationText {
  width: 100%;
  font-size: 38rpx;
  font-weight: 400;
  color: #000;
  line-height: 54rpx;
  letter-spacing: 2rpx;
}

.feedback .input {
  width: calc(100% - 48rpx);
  height: 140px !important;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 38rpx;
  line-height: 40rpx;
  padding: 24rpx 24rpx 36rpx 24rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 40rpx;


}

.feedback .submit {
  margin-top: 80rpx;
  width: calc(100% - 48rpx);
  padding: 28rpx 0;
  font-size: 24rpx;
  color: #fff;
  background: #D53030;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16rpx;
  font-size: 38rpx;
}

.feedback .input ::placeholder {
  font-weight: bold;
}

/* 头部额度部分 */
</style>
